<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- <link rel="apple-touch-icon" type="image/png"
        href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

    <link rel="mask-icon" type=""
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111" /> -->


    <title>CodePen - Responsive Vertical Timeline</title>

    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> -->



    <style>
        body {
            background: #e6e6e6;
            font-family: "Roboto", sans-serif;
            font-weight: 400;
        }

        /*===== Vertical Timeline =====*/
        #conference-timeline {
            position: relative;
            max-width: 920px;
            width: 100%;
            margin: 0 auto;
        }

        #conference-timeline .timeline-start,
        #conference-timeline .timeline-end {
            display: table;
            font-family: "Roboto", sans-serif;
            font-size: 18px;
            font-weight: 900;
            text-transform: uppercase;
            background: #00b0bd;
            padding: 15px 23px;
            color: #fff;
            max-width: 5%;
            width: 100%;
            text-align: center;
            margin: 0 auto;
        }

        #conference-timeline .conference-center-line {
            position: absolute;
            width: 3px;
            height: 100%;
            top: 0;
            left: 50%;
            margin-left: -2px;
            background: #00b0bd;
            z-index: -1;
        }

        #conference-timeline .conference-timeline-content {
            padding-top: 67px;
            padding-bottom: 67px;
        }

        .timeline-article {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            margin: 20px 0;
        }

        .timeline-article .content-left-container,
        .timeline-article .content-right-container {
            max-width: 44%;
            width: 100%;
        }

        .timeline-article .timeline-author {
            display: block;
            font-weight: 400;
            font-size: 14px;
            line-height: 24px;
            color: #242424;
            text-align: right;
        }

        .timeline-article .content-left,
        .timeline-article .content-right {
            position: relative;
            width: auto;
            border: 1px solid #ddd;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
            padding: 27px 25px;
        }

        .timeline-article p {
            margin: 0 0 0 60px;
            padding: 0;
            font-weight: 400;
            color: #242424;
            font-size: 14px;
            line-height: 24px;
            position: relative;
        }

        .timeline-article p span.article-number {
            position: absolute;
            font-weight: 300;
            font-size: 44px;
            top: 10px;
            left: -60px;
            color: #00b0bd;
        }

        .timeline-article .content-left-container {
            float: left;
        }

        .timeline-article .content-right-container {
            float: right;
        }

        .timeline-article .content-left:before,
        .timeline-article .content-right:before {
            position: absolute;
            top: 20px;
            font-size: 23px;
            font-family: "FontAwesome";
            color: #fff;
        }

        .timeline-article .content-left:before {
            content: "\f0da";
            right: -8px;
        }

        .timeline-article .content-right:before {
            content: "\f0d9";
            left: -8px;
        }

        .timeline-article .meta-date {
            position: absolute;
            top: 0;
            left: 50%;
            width: 62px;
            height: 62px;
            margin-left: -31px;
            color: #fff;
            border-radius: 100%;
            background: #00b0bd;
        }

        .timeline-article .meta-date .date,
        .timeline-article .meta-date .month {
            display: block;
            text-align: center;
            font-weight: 900;
        }

        .timeline-article .meta-date .date {
            font-size: 30px;
            line-height: 40px;
        }

        .timeline-article .meta-date .month {
            font-size: 18px;
            line-height: 10px;
        }

        /*===== // Vertical Timeline =====*/

        /*===== Resonsive Vertical Timeline =====*/
        @media only screen and (max-width: 830px) {

            #conference-timeline .timeline-start,
            #conference-timeline .timeline-end {
                margin: 0;
            }

            #conference-timeline .conference-center-line {
                margin-left: 0;
                left: 50px;
            }

            .timeline-article .meta-date {
                margin-left: 0;
                left: 20px;
            }

            .timeline-article .content-left-container,
            .timeline-article .content-right-container {
                max-width: 100%;
                width: auto;
                float: none;
                margin-left: 110px;
                min-height: 53px;
            }

            .timeline-article .content-left-container {
                margin-bottom: 20px;
            }

            .timeline-article .content-left,
            .timeline-article .content-right {
                padding: 10px 25px;
                min-height: 65px;
            }

            .timeline-article .content-left:before {
                content: "\f0d9";
                right: auto;
                left: -8px;
            }

            .timeline-article .content-right:before {
                display: none;
            }
        }

        @media only screen and (max-width: 400px) {
            .timeline-article p {
                margin: 0;
            }

            .timeline-article p span.article-number {
                display: none;
            }

        }

        /*===== // Resonsive Vertical Timeline =====*/
    </style>

</head>

<body translate="no">
    <html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Responsive Vertical Timeline</title>

        <!-- Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700,900' rel='stylesheet'
            type='text/css'>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
            type="text/css">
        <!-- // Fonts -->
    </head>

    <body>
        <!-- Vertical Timeline -->
        <section id="conference-timeline">
            <div class="timeline-start">Start</div>
            <div class="conference-center-line"></div>
            <div class="conference-timeline-content">
                <!-- Article -->
                <div class="timeline-article">
                    <div class="content-left-container">
                        <div class="content-left">
                            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our
                                planet is. Mankind, let us preserve and increase this beauty, and not destroy it! <span
                                    class="article-number">01</span></p>
                        </div>
                        <span class="timeline-author">John Doe</span>
                    </div>
                    <div class="content-right-container">
                        <div class="content-right">
                            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our
                                planet is. <span class="article-number">02</span></p>
                        </div>
                        <span class="timeline-author">John Doe</span>
                    </div>
                    <div class="meta-date">
                        <span class="date">18</span>
                        <span class="month">APR</span>
                    </div>
                </div>
                <!-- // Article -->

                <!-- Article -->
                <div class="timeline-article">
                    <div class="content-left-container">
                        <div class="content-left">
                            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our
                                planet is. Mankind, let us preserve and increase this beauty, and not destroy it! <span
                                    class="article-number">01</span></p>
                        </div>
                        <span class="timeline-author">John Doe</span>
                    </div>
                    <div class="content-right-container">
                        <div class="content-right">
                            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our
                                planet is. <span class="article-number">02</span></p>
                        </div>
                        <span class="timeline-author">John Doe</span>
                    </div>
                    <div class="meta-date">
                        <span class="date">18</span>
                        <span class="month">APR</span>
                    </div>
                </div>
                <!-- // Article -->

                <!-- Article -->
                <div class="timeline-article">
                    <div class="content-left-container">
                        <div class="content-left">
                            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our
                                planet is. Mankind, let us preserve and increase this beauty, and not destroy it! <span
                                    class="article-number">01</span></p>
                        </div>
                        <span class="timeline-author">John Doe</span>
                    </div>
                    <div class="content-right-container">
                        <div class="content-right">
                            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our
                                planet is. <span class="article-number">02</span></p>
                        </div>
                        <span class="timeline-author">John Doe</span>
                    </div>
                    <div class="meta-date">
                        <span class="date">18</span>
                        <span class="month">APR</span>
                    </div>
                </div>
                <!-- // Article -->
            </div>
            <div class="timeline-end">End</div>
        </section>
        <!-- // Vertical Timeline -->
    </body>

    </html>
    <!-- <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script id="rendered-js">
        /*
        9/22/2014 - Update 1: Added Author Name and changed some html and css. :) Enjoy.
        */
//# sourceURL=pen.js
    </script> -->



</body>

</html>